<template>
  <view class="doctor-list-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="yticon icon-zuojiantou"></text>
      </view>
      <text class="title">问诊</text>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="搜索科室、疾病、医生" disabled/>
    </view>

    <!-- 分类导航 -->
    <view class="nav-bar">
      <view class="nav-item">
        <button class="nav-button" @click="">
          <text>问诊</text>
        </button>
      </view>
    </view>

    <!-- 医生列表 -->
    <view class="doctor-list">
      <view class="filter-bar">
        <text>优选医生</text>
        <text>价格</text>
      </view>
      <view class="list-content">
        <view
            v-for="(doctor, index) in doctorList"
            :key="index"
            class="doctor-item"
        >
          <image class="avatar" :src="doctor.avatar || '/static/temp/doctor-avatar.png'" mode="aspectFill"></image>
          <view class="info">
            <view class="name-row">
              <text class="name">{{ doctor.name }}</text>
              <text class="title">{{ doctor.title }}</text>
            </view>
            <text class="hospital">{{ doctor.hospital_name }} {{ doctor.department_name }}</text>
            <view class="tags">
              <text class="tag">擅长</text>
              <text class="expertise">{{ doctor.expertise }}</text>
            </view>
            <view class="stats"></view>
            <view class="fees">
              <text>图文 ¥{{ doctor.consultationFeeText || 0 }}</text>
            </view>
          </view>
          <button class="consult-btn" @click="navToConsultationPage(doctor)">问医生</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { log } from 'util';

export default {
  data() {
    return {
      doctorList: [],
    };
  },

  onLoad() {
    this.loadDoctors();
  },

  methods: {
    // 返回上一界面
    goBack() {
      uni.navigateBack({
        delta: 1 // 返回上一层，默认值为1
      });
    },

    // 加载医生列表
    async loadDoctors() {
      try {
        log('加载中');
        uni.showLoading({ title: '加载中...' });
        const res = await uni.request({
          url: 'http://localhost:8080/app/doctor/getDoctor',
          method: 'GET'
        });

        if (res[1].data.code === 200) {
          this.doctorList = res[1].data.data;
        } else {
          uni.showToast({ title: '加载医生列表失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '网络错误', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },

    navToConsultationPage(doctor) {
      if (!doctor || !doctor.id) {
        uni.showToast({ title: '医生信息不完整', icon: 'none' });
        return;
      }
      const url = `/pages/inquiry/doctor-detail?id=${doctor.id}`;
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss">
// 自定义变量
$primary-color: #00c4b4;
$font-color-dark: #333333;
$font-color-light: #999999;
$border-radius: 10upx;

.doctor-list-page {
  min-height: 100vh;
  background: #f5f5f5;

  .header {
    position: fixed; // 固定顶部导航
    top: 0;
    left: 0;
    right: 0;
    height: 88upx;
    line-height: 88upx;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.05);
    z-index: 10;

    .back-btn {
      position: absolute;
      left: 20upx;
      top: 50%;
      transform: translateY(-50%);
      width: 60upx;
      height: 60upx;
      line-height: 60upx;
      background: #f5f5f5;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s;

      .icon-zuojiantou {
        font-size: 36upx;
        color: $font-color-dark;
      }

      &:hover {
        background: #e0e0e0;
      }
    }

    .title {
      font-size: 34upx;
      font-weight: 500;
      color: $font-color-dark;
    }
  }

  .search-bar {
    padding: 108upx 30upx 20upx; // 调整顶部距离以适应固定导航
    background: #fff;
    margin-bottom: 10upx;

    .search-input {
      height: 60upx;
      line-height: 60upx;
      background: #f5f5f5;
      border-radius: 30upx;
      padding: 0 30upx;
      font-size: 28upx;
      color: $font-color-light;
    }
  }

  .nav-bar {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 20upx 0;
    margin-bottom: 10upx;

    .nav-item {
      flex: 1;
      text-align: center;

      .nav-button {
        width: 80%;
        height: 60upx;
        line-height: 60upx;
        background: #f5f5f5;
        border: 1upx solid #eee;
        border-radius: 10upx;
        font-size: 28upx;
        color: $font-color-dark;

        text {
          display: block;
        }

        &:active {
          background: #e0e0e0;
        }
      }
    }
  }

  .doctor-list {
    .filter-bar {
      display: flex;
      justify-content: space-around;
      background: #fff;
      padding: 20upx 0;
      margin-bottom: 10upx;

      text {
        font-size: 28upx;
        color: $font-color-dark;
      }
    }

    .list-content {
      background: #fff;
      padding: 0 30upx;

      .doctor-item {
        display: flex;
        align-items: center;
        padding: 20upx 0;
        border-bottom: 1upx solid #eee;

        .avatar {
          width: 80upx;
          height: 80upx;
          border-radius: 50%;
          margin-right: 20upx;
          border: 2upx solid #f5f5f5;
        }

        .info {
          flex: 1;

          .name-row {
            display: flex;
            align-items: center;
            margin-bottom: 10upx;

            .name {
              font-size: 32upx;
              font-weight: bold;
              color: $font-color-dark;
              margin-right: 10upx;
            }

            .title {
              font-size: 24upx;
              color: $font-color-light;
              background: #f0f9f8;
              padding: 4upx 8upx;
              border-radius: 8upx;
            }
          }

          .hospital {
            font-size: 26upx;
            color: $font-color-dark;
            margin-bottom: 10upx;
          }

          .tags {
            display: flex;
            align-items: center;
            margin-bottom: 10upx;

            .tag {
              font-size: 24upx;
              color: #fff;
              background: $primary-color;
              padding: 4upx 8upx;
              border-radius: 4upx;
              margin-right: 10upx;
            }

            .expertise {
              font-size: 24upx;
              color: $font-color-dark;
            }
          }

          .fees {
            font-size: 24upx;
            color: $primary-color;
          }
        }

        .consult-btn {
          width: 120upx;
          height: 60upx;
          line-height: 60upx;
          background: $primary-color;
          color: #fff;
          font-size: 24upx;
          border-radius: 30upx;
          border: none;
          transition: all 0.3s;

          &:hover {
            background: darken($primary-color, 10%);
          }
        }
      }
    }
  }
}
</style>
